<template>
  <div class="infinite-container">
    <div class="text-warning">复诊配药必须为常见病,慢性病且三个月内在医院线下就诊过</div>
    <div class="greenTop">
      <div class="select-role flex flex_between">
        <div class="roleLeft flex flex_vcenter">
          <span class="ml10 f16">就诊人</span>
        </div>
        <div class="roleRight flex flex_vcenter" @click="showSelPerson()">
          <span>{{familyPerson.realname}}</span>
          <span class="centerT">{{familyPerson.sexcode | getSex}}</span>
          <span>{{familyPerson.birthdate | getAge}}岁</span>
          <i class="iconfont icon-small-arrow-right t9" />
        </div>
      </div>
    </div>

    <div class="tbar f12">请从线下就诊记录中选择本次需要复诊配药的记录</div>
    <div class="medicalAgainList">
      <ul v-if="visitRecords.length > 0">
        <li
          class="flex medicalAgainItem"
          v-for="(value, index) in visitRecords"
          :key="index + '-only1'"
        >
          <div class="dateBox">
            <div>
              <p
                class="bigText"
              >{{ value.diagnosisDate && value.diagnosisDate.slice(5,11).replace('-','/')}}</p>
              <p class="smallText">{{ value.diagnosisDate && value.diagnosisDate.slice(0,4)}}</p>
            </div>
            <div class="line"></div>
            <div>门诊</div>
          </div>
          <div class="prescriptionMsg flex_full">
            <div class="flex flex_between pd8">
              <span class="bigText">{{value.departmentName}}</span>
              <span class="bigText">{{value.hospitalName}}</span>
            </div>
            <div class="prescriptionBtn flex_vcenter flex_between flex wrap">
              <ul class="flex wrap">
                <li @click="goRecipeDetail(value)">处方1</li>
              </ul>
              <div style="color: #f60;" v-if="value.isConsultOngoing == 1">复诊中</div>
            </div>
            <div class="flex flex_between bottomHandler flex_vcenter">
              <span style="max-width: 60%">{{value.diagnosisName}}</span>
              <div>
                <button class @click="goCheckDetail(value)" v-if="value.isConsultOngoing == 1">查看记录</button>
                <button @click="openSelDrugPopup(value)" v-else>复诊配药</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="not-found" v-else>
        <div>没有就诊记录</div>
      </div>
    </div>

    <mu-dialog :open="tipsForActiveDialog" title="温馨提示" @close="closeTipsForActiveDialog">
      所选科室已有进行中的复诊记录
      <mu-flat-button slot="actions" @click="closeTipsForActiveDialog" primary label="取消" />
      <mu-flat-button slot="actions" primary @click="goCheckDetail()" label="马上查看" />
    </mu-dialog>
    <popup :show="showSelDrugPopup" :popupStyle="{}" @hidePopup="closePopup()">
      <div class="popupContent">
        <div class="popupTitle flex flex_vcenter flex_between">
          <h3>请选择本次所需的药品（供医生参考）</h3>
          <img src="../../assets/images/ic_popup_close.png" alt @click="closePopup()" />
        </div>
        <p class="line"></p>
        <ul class="drugItems">
          <li
            class="flex flex_between flex_vcenter"
            v-for="(value, index) in selVisitRecords.drugItem"
            :key="index"
            @click="value.sel = !value.sel"
          >
            <p>{{value.drugName}} {{value.specifiation}}</p>
            <i class="popupRadio" :class="{iconOk: value.sel}"></i>
          </li>
        </ul>
        <div class="flex bottomHandler flex_between">
          <button class="medicalAgainBtn medicalAgainBtn-empty" @click="closePopup()">取消</button>
          <button class="medicalAgainBtn medicalAgainBtn-color" @click="goSelDoctor()">确定</button>
        </div>
      </div>
    </popup>
    <select-role2 @familychang="familyChangeHandle" ref="childRole"></select-role2>
  </div>
</template>

<script>
import searchBarClick from "../../components/SearchBarClick.vue";
import leftBorderTitle from "../../components/leftBorderTitle.vue";
import SelectRole2 from "../../components/SelectRole2.vue";
import iconTest from "../../assets/hzssyy/icon_qdqh.png";
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
import confirmId from "../../components/confirmId";
import popup from "../../components/BsPopup.vue";
export default {
  data() {
    return {
      visitRecords: [],
      selVisitRecords: {},
      familyPerson: JSON.parse(sessionStorage.getItem("familyPerson")) || {},
      person: JSON.parse(sessionStorage.getItem("person")) || {},
      showCheck: false,
      tipsForActiveDialog: false,
      showSelDrugPopup: false,
      currentData: "",
      pageBefore: ""
    };
  },
  components: {
    leftBorderTitle,
    SelectRole2,
    confirmId,
    popup
  },
  filters: {
    getAge(val) {
      if (val) {
        return new Date().getFullYear() - val.slice(0, 4);
      } else {
        return "";
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/queryOnline/doctorDetail") {
      next(vm => {
        vm.pageBefore = from.path;
      });
    } else {
      next();
    }
  },
  mounted() {
    if (this.familyPerson.patientcode) {
      this.getVisitRecord();
    }
  },
  methods: {
    goCheckDetail(val) {
      this.currentData = val;
      let status = this.currentData.consultStatus;
      if (status == 10 || status == 14) {
        // 10: 待支付 14:超时未支付
        this.$router.push({
          path: "/medicalHistory/topayDetail",
          query: {
            id: this.currentData.consultId
          }
        });
      } else {
        const consultId = this.currentData.consultId || "";
        const doctorName = this.currentData.doctorName || "";
        const doctorCode = this.currentData.doctorCode || "";
        const doctorId = this.currentData.doctorId || "";
        const status = this.currentData.consultStatus || "";

        let url =
          "app://medicalAgainIMFromMainPage?consultId=" +
          consultId +
          "&doctorName=" +
          doctorName +
          "&doctorCode=" +
          doctorCode +
          "&status=" +
          status +
          "&doctorId=" +
          doctorId;
        console.log("GO TO APP:", url);
        window.location.href = url;
      }
      this.tipsForActiveDialog = false;
    },
    goRecipeDetail(item) {
      // 查看历史处方
      console.log(item);
      this.$router.push({
        path: "/medicalHistory/medicalDetail",
        query: {
          id: item.consultId,
          visitNo: item.visitNo
        }
      });
    },
    showSelPerson() {
      this.$refs.childRole.show();
    },
    closePopup() {
      this.showSelDrugPopup = false;
    },
    closeTipsForActiveDialog() {
      this.tipsForActiveDialog = false;
    },
    tipsForActive(val) {
      this.currentData = val;
      this.tipsForActiveDialog = true;
    },
    openSelDrugPopup(value) {
      this.selVisitRecords = value;
      commonAjaxJson(
        RESTFUL_API.getDrugPrescriptions,
        {
          hospitalCode: sessionStorage.hospitalCode,
          emergencyNumber: "555",
          // emergencyNumber: value.emergencyNumber,
          historyStatus: 0,
          localStatus: 0
        },
        true
      ).then(res => {
        const { code, data } = res.data;
        if (code == 200 && data) {
          this.showSelDrugPopup = true;
          this.$set(this.selVisitRecords, "drugItem", []);
          data.forEach(item => {
            item.prescriptionDrugList.forEach(item2 => {
              item2.sel = false;
              this.selVisitRecords.drugItem.push(item2);
            });
          });
        } else {
          this.$store.commit("UPDATE_TOAST", { message: "没有查询到药品" });
        }
      });
    },

    searchHandler(val) {
      this.$router.push("/queryOnline/selDoctor");
    },

    goSelDoctor() {

      sessionStorage.setItem(
        "selectedMedical",
        JSON.stringify(this.selVisitRecords)
      );
      sessionStorage.setItem(
        "selectedMedicalItem",
        JSON.stringify(this.selVisitRecords.drugItem)
      );
      if (this.pageBefore == "/queryOnline/doctorDetail") {
        sessionStorage.setItem(
          "medicalAgainDoctor",
          JSON.stringify(this.$route.query)
        );
        this.$router.replace({
          path: "/medicalAgain/medChose"
        });
      } else {
        sessionStorage.removeItem("medicalAgainDoctor");
        this.$router.push({
          path: "/medicalAgain/medChose"
        });
      }
    },

    getVisitRecord(ids) {
      const allcodes = this.familyPerson.allPatientCodes;
      if (allcodes) {
        ids = allcodes;
      }
      // let params = {
      //   patientCodeList: ids || this.familyPerson.patientcode,
      // };
      let params = {
        patientCode: ids || this.familyPerson.patientcode,
        hospitalCode: sessionStorage.hospitalCode,
        pageNo: 1,
        pageSize: 999
      };

      commonAjaxJson(RESTFUL_API.listHistoryRecord, params, true).then(res => {
        this.visitRecords = res.data.data;
      });
    },

    go(path) {
      this.$router.push(path);
    },

    // 切换就诊人
    familyChangeHandle(val) {
      this.familyPerson = val;
      this.getVisitRecord(val.allPatientCodes);
      sessionStorage.familyPerson = JSON.stringify(val);
    },

    // 选中记录
    clickHandle(item) {
      sessionStorage.selectedMedical = JSON.stringify(item);
      this.$router.push({
        path: "/medicalAgain/medChose"
      });
    }
  }
};
</script>
<style lang="less">
#confirmId {
  .mu-item-wrapper {
    background: none !important;
  }
  .mu-item-title {
    color: gray;
  }
}
</style>
<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";
.popupContent {
  .drugItems {
    > li {
      border-bottom: 1px solid #f7f7f7;
      padding: 10px;
    }
  }
  .bottomHandler {
    button {
      width: 46%;
    }
    padding: 10px;
  }
  .popupRadio {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #c5c8d0;
  }
  .iconOk {
    background-image: url("../../assets/images/iconfont-ok-checked.png");
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid #4fbb6c;
  }
  background-color: white;
  .popupTitle {
    padding: 14px;
    img {
      width: 18px;
      height: 18px;
    }
  }
  .line {
    border-top: 1px solid #f7f7f7;
    margin: 0 10px;
  }
}
.pd8 {
  padding: 8px;
}
.medicalAgainList {
  width: 100%;
  position: absolute;
  top: 118px;
  bottom: 0;
  overflow-y: scroll;
  .medicalAgainItem {
    border-bottom: 10px solid #f2f2f2;
  }
  padding: 0 10px 10px 10px;
  .dateBox {
    background-color: #e9f8f0;
    color: @color-primary;
    text-align: center;
    padding: 10px;
    .line {
      border-top: 1px solid @color-primary;
      margin: 2px 0 20px 0;
    }
    .bigText {
      font-size: 16px;
    }
    .smallText {
      text-align: right;
    }
  }
  .prescriptionMsg {
    background-color: white;
    .bigText {
      font-size: 16px;
      color: #333;
    }
    .prescriptionBtn {
      padding: 0 8px 8px 8px;
      li {
        border: 1px solid @color-primary;
        border-radius: 15px;
        padding: 0 8px;
        height: 30px;
        line-height: 30px;
        color: @color-primary;
      }
    }
    .bottomHandler {
      > span {
        color: #b0b0b0;
      }
      padding: 0 8px 8px 8px;
      .disabledBtn {
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        color: white;
        background-color: #cccccc;
        border: 1px solid transparent;
        border-radius: 5px;
        outline: none;
      }
      button {
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        border: 1px solid @color-primary;
        border-radius: 5px;
        color: @color-primary;
        background-color: white;
        outline: none;
      }
    }
  }
}
.infinite-container {
  @{deep} .mu-list {
    background: #fff;
  }
  @{deep} .mu-item-title {
    color: #fff;
    font-size: 16px;
  }
  @{deep} .mu-item-right {
    color: #fff;
    font-size: 14px;
  }
  @{deep} .mu-item.show-left {
    padding-left: 42px;
  }
  @{deep} .mu-item-wrapper {
    background: url(../../assets/wzjl/bg_zxwz_fzjl.png) no-repeat center
      center/100% 100%;
  }
  @{deep} .mu-item-content {
    padding-left: 5px;
  }
  .t3 {
    color: #fff;
  }
}

.tbar {
  height: 35px;
  line-height: 35px;
  background: #f0f0f0;
  color: #666;
  padding-left: 15px;
}

.davatar {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.selcolor {
  color: #29bc6c;
}

.medlist {
  padding: 0px 12px 10px 15px;
  background: #fff;
  width: 100%;
  dl {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
  }
  dt {
    width: 100%;
    min-height: 44px;
    display: table;
    padding: 10px 0;
    > span {
      display: table-cell;
      vertical-align: middle;
      color: #666;
    }
    > div {
      color: #333;
      display: table-cell;
      vertical-align: middle;
      text-align: right;
      padding-right: 24px;
      position: relative;
      > i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        right: 0px;
      }
    }
  }
  dd {
    width: 100%;
    padding: 0;
    margin: 0;
    ul {
      width: 100%;
      > li:last-child {
        padding-bottom: 0px;
      }
      > li:first-child {
        padding-top: 12px;
      }
      > li {
        padding: 6px 0px 6px 0px;
        width: 100%;
        display: table;
        > div {
          display: table-cell;
          color: #999;
          font-size: 12px;
          > div + div {
            padding-top: 2px;
          }
        }
        > div:first-child {
          > div:first-child {
            color: #666;
            font-size: 14px;
          }
        }
        > div:nth-child(2) {
          color: #999;
          text-align: right;
          white-space: nowrap;
        }
      }
    }
  }
}

.mitem + .mitem {
  margin-top: 10px;
}
.mitem {
  width: 100%;
  background: #fff;
  .mbar {
    position: relative;
    .leftBorderTitle p {
      padding-left: 10px;
      color: #0fc47d;
    }
    > i.larrow {
      color: #cdcdcd;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
    }
  }
  &-title {
    width: 100%;
    padding: 15px 10px 15px 15px;
    > li {
      width: 100%;
      padding-right: 100px;
      position: relative;
      @{deep} .mu-raised-button-primary {
        background-color: #fff;
        border: 1px solid #ff6500;
        color: #ff6500;
        position: absolute;
        top: 50%;
        right: 10px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      @{deep} .mu-raised-button-label {
        padding: 0;
      }
      @{deep} .mu-raised-button {
        height: 28px;
        line-height: 28px;
        min-width: 75px;
      }
      > div {
        width: 100%;
        display: table;
        font-size: 14px;
        > span {
          display: table-cell;
          color: #333;
        }
        > span:first-child {
          width: 66px;
          color: #666;
          white-space: nowrap;
          padding-right: 10px;
        }
      }
    }
  }
}
.centerT {
  padding: 0 5px;
}
</style>
